import React from "react";
import styles from "./main.module.css";
import { Button } from "antd";
export interface steptState {
  msg: string;
  num: number; //当前数值
}

export interface steptProps {
  name?: string;
  defaultNum?: number; //默认数值
  onChange?:(val:number)=>void //回调函数
}

export default class Stept extends React.Component<steptProps, steptState> {
  state = {
    msg: "计数器",
    num: 0, //当前数值
  };
  static defaultProps = {
    //设置props默认值方法
    name: "计数器",
    defaultNum: 0, //默认数值
  };
  // constructor(props: steptProps) {
  //   super(props);
  // }

  render() {
    return (
      <div className={styles.stept}>
        <Button onClick={this.addNum.bind(this)}>{this.state.num}</Button>
      </div>
    );
  }
  componentWillUpdate(nextProps: steptProps, nextState: steptState) {
    // 监听数据更新
  
    if (nextProps.defaultNum&&nextProps.defaultNum!==this.props.defaultNum) {
      // 如果有设num值
     
    
      this.setState({ num: nextProps.defaultNum });
    }
  }
  componentDidMount(){
    // 挂载完成初始化值
    if(this.props.defaultNum)
    this.setState({ num: this.props.defaultNum });
  }
  addNum() {
    // 增加
    let newVal=this.state.num+1
    this.setState({ num: newVal });
    if(this.props.onChange)
    this.props.onChange(newVal)
  }
}
